'use strict';
var React = require('react');
var ReactRedux = require('react-redux');
var ReTab = require('./ReTab.jsx');
var ReSlider = require('./ReSlider.jsx');
var HkfsProductDetailTab = require('../../components/pc/HkfsProductDetailTab.jsx');
var ReButton = require('../../components/pc/ReButton.jsx');
var HkfsRegister = require('../../components/pc/HkfsRegister.jsx');
var HkfsRaiseFundsTable = require('../../components/pc/HkfsRaiseFundsTable.jsx');
var ReImg = require('../../components/pc/ReImg.jsx');
var actions = require('../../actions/products');
var ReDialog = require('../../components/pc/ReDialog.jsx');
class HkfsProducts extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabActive: 0
        };
        this.renderTab1Slider = this.renderTab1Slider.bind(this);
        this.renderTabContent = this.renderTabContent.bind(this);
        this.replaceReglarProducts = this.replaceReglarProducts.bind(this);
        this.replaceFloatProducts = this.replaceFloatProducts.bind(this);
        this.replaceReglarAndFloatProducts = this.replaceReglarAndFloatProducts.bind(this);
        this.getTabActive = this.getTabActive.bind(this);
        this.buyHuangkangbao = this.buyHuangkangbao.bind(this);
        this.renderProductsSlider = this.renderProductsSlider.bind(this);
    }



    getTabActive() {
        //利用window变量识别node和客户端环境，客户端渲染时才执行切换tab页的操作
        if (typeof window !== 'undefined') {
            //客户端渲染完成后修改activeItem,用于定位到特定的tab
            var activeItem = location.href.split('#active')[1];
                if (activeItem) {
                    return parseInt(activeItem);
                }
                else {
                    return 0;
                }
        }
        else {
            return 0;
        }
    }

    //提示开发中
    showTips(){
        var style={
            padding:'10px 0'
        };
        ReDialog.showDialog({
            title: '提示',
            content: <div><div style={style}><img src="images/pc/developing_small.png"/></div><div>玩命开发中</div></div>,
            isMask: true,
            isCancel: false,
            dialogWidth: '300px',
            dialogHeight: '300px',
            result: (result)=> {
            }
        });
    }

    buyHuangkangbao() {
        this.showTips();
    }

    //渲染轮播条
    renderTab1Slider() {
        return this.props.tab1SliderItems.map((item, i)=> {
            return <a key={"homeSliderItem"+i} href={item.href}><ReImg realImg={item.imgHref} reClass="mainSlider"
                                                                       backImg="/images/pc/banner_bg_default.jpg"/></a>
        })
    }

    //父子标产品点击显示全部后更新数据源
    replaceProducts(productData, item) {
        var clone = productData;
        for (var i = 0; i < clone.length; i++) {
            for (var j = 0; j < clone[i].productTypes.length; j++) {
                if (clone[i].productTypes[j].parId == item.parId) {
                    clone[i].productTypes[j] = item;
                }
            }
        }
        return clone;
    }

    //固收数据更新
    replaceReglarProducts(item) {
        var clone = this.props.regularProfitProducts.concat();
        var result = this.replaceProducts(clone, item);
        this.props.dispatch(actions.receiveRegularProfitProducts(result));
    }

    //浮动数据更新
    replaceFloatProducts(item) {
        var clone = this.props.floatProfitProducts.concat();
        var result = this.replaceProducts(clone, item);
        this.props.dispatch(actions.receiveFloatProfitProducts(result));
    }

    //固定+浮动更新
    replaceReglarAndFloatProducts(item) {
        var clone = this.props.regularAndFloatProfitProducts.concat();
        var result = this.replaceProducts(clone, item);
        this.props.dispatch(actions.receiveRegularAndFloatProfitProducts(result));
    }


    //渲染产品内容
    renderTabContent(productData, updateCallBack) {
        if (productData && productData.length > 0) {
            let widthArray = ['25%', '15%', '15%', '15%', '15%', '15%'];
            let itemTitle = ['产品名称', '年化利率', '期限', '可投金额', '进度', '操作'];
            let itemTypes = ['string', 'largeRed', 'string', 'string', 'process', 'button'];
            return productData.map((item, i)=> {
                return <div key={"regularProfitProducts"+i} className="ProductContent">
                    <div className="ProductsTitle">
                        <img src="/images/pc/fixed_content_icon_buy.png"/>
                        <span>{item.typeName}</span>
                    </div>
                    <div className="HkfsProductTabDiv">
                        <HkfsProductDetailTab showAllCallBack={updateCallBack}
                                              gobalDispatch={this.props.dispatch} productTypes={item.productTypes}
                                              widthArray={widthArray} itemTitle={itemTitle}
                                              itemTypes={itemTypes} tabWidth="180px"
                                              itemHref="/productDetail?parId={id}"
                                              showTips={this.showTips}
                        ></HkfsProductDetailTab>
                    </div>
                </div>
            });
        }
        else {
            return <div className="ProductEmptyDiv">
                <div className="ProductEmptyImgDiv">
                    <img src="images/pc/space_page_big.png"/>
                </div>
                <div className="ProductEmptyText">暂时没有产品哦</div>
            </div>
        }
    }

    //渲染轮播图
    renderProductsSlider(productData) {
        if (productData && productData.length > 0) {
            return <ReSlider heightAuto="19%" isAutomatic={true} showCount={1} isShowPrevAndNext={true}>
                {this.renderTab1Slider()}
            </ReSlider>
        }
    }

    render() {
        let widthArray = ['28%', '12%', '10%', '10%', '10%', '10%', '10%', '10%'];
        let itemTitle = ['基金名称/代码', '最新净值（元）', '日涨幅', '近一个月', '近三个月', '近一年', '今年以来', '操作'];
        let itemTypes = ['doubleString', 'string', 'arrow', 'arrow', 'arrow', 'arrow', 'arrow', 'button'];
        return <div className="HkfsProducts">
            <ReTab activeItem={this.getTabActive()} reClass="HkfsProductTab" changeUrl={true}>
                <div reTabTitle="固定收益">
                    {this.renderProductsSlider(this.props.regularProfitProducts)}
                    {this.renderTabContent(this.props.regularProfitProducts, this.replaceReglarProducts)}
                </div>

                <div reTabTitle="浮动收益类">
                    {this.renderProductsSlider(this.props.floatProfitProducts)}
                    {this.renderTabContent(this.props.floatProfitProducts, this.replaceFloatProducts)}
                </div>
                <div reTabTitle="固定+浮动收益">
                    {this.renderProductsSlider(this.props.regularAndFloatProfitProducts)}
                    {this.renderTabContent(this.props.regularAndFloatProfitProducts, this.replaceReglarAndFloatProducts)}
                </div>
                <div reTabTitle="公募基金">
                    <div className="HkfsProductsRaisedBannerBack">
                        <img src="/images/pc/banner/fund_banner_bg.jpg"/>
                        <div className="HkfsProductsHKB">
                            <div className="HkfsProductsHKBBig">收益超银行活期8-10倍</div>
                            <div className="HkfsProductsHKBSmall">宝宝类理财产品----华康宝</div>
                            <div><ReButton reClass="HKBButton" reButtonClick={this.buyHuangkangbao}>马上赚钱</ReButton>
                            </div>
                        </div>
                    </div>
                    <div className="ProductContent">
                        <HkfsRaiseFundsTable gobalDispatch={this.props.dispatch}
                                             data={this.props.raiseFunds.resultContent} widthArray={widthArray}
                                             title={itemTitle} itemTypes={itemTypes} buttonText="立即购买"
                                             page={this.props.raiseFunds.page}
                                             totalPage={this.props.raiseFunds.totalPage}
                                             itemHref="/fundDetail?fundCode={id}"
                                             showTips={this.showTips}
                        ></HkfsRaiseFundsTable>
                    </div>
                </div>
            </ReTab>
            <ReDialog></ReDialog>
        </div>
    }
}


function mapStateToProps(state) {
    // 一般一组状态都是为一个页面服务的，所以把它们一股脑的映射过来比较方便
    // 但是把映射一一写出来也有好处，就是很容易看到组件里有什么属性

    return Object.assign({}, state.products);
}

module.exports = ReactRedux.connect(mapStateToProps)(HkfsProducts);